<template>
  <div class="page-wrap">
    <div class="page-content">
      <div class="img-header">
        <div style="font-weight: 700; font-size: 18px">
          <Button
            type="primary"
            ghost
            icon="md-arrow-back"
            style="margin-right: 15px"
            @click="returnHwDrillDetail"
          >
            返回
          </Button>
          离线流量分析
        </div>
        <div style="display: flex; justify-content: flex-end; width: 50%">
          <!-- <Button type="primary" ghost class="md-add-jh" @click="getFileList">
            创建任务
          </Button> -->
          <Button type="primary" ghost class="md-add-jh" @click="addFlowModal"
            >创建任务</Button
          >
          <Input
            clearable
            v-model.trim="queryParams.taskName"
            placeholder="名称"
            @on-change="searchFlowNameBtn"
            style="width: 180px; margin-left: 15px"
          />
          <Input
            clearable
            v-model.trim="queryParams.fileName"
            placeholder="文件名"
            @on-change="searchFlowNameBtn"
            style="width: 180px; margin-left: 15px"
          />
          <Select filterable
            v-model="queryParams.status"
            placeholder="状态"
            clearable
            transfer
            style="width: 150px; margin-left: 15px"
          >
            <Option value="0">分析成功</Option>
            <Option value="1">分析异常</Option>
            <Option value="2">分析中</Option>
          </Select>
          <Button
            class="header-btn"
            type="primary"
            ghost
            style="height: 32px; margin-left: 5px"
            @click="refreshFlow"
          >
            <i class="el-icon-refresh-right" />
          </Button>
        </div>
      </div>

      <div v-show="FlowList.length > 0">
        <Table
          :columns="FlowCol"
          :data="FlowList"
          class="fixedHeightTable"
        ></Table>

        <Page
          style="text-align: center; padding: 15px"
          :total="FlowTotal"
          :current="FlowPage"
          show-total
          show-elevator
          :page-size="FlowPageSize"
          @on-change="FlowOnChange"
        >
        </Page>
      </div>

      <div v-show="FlowList.length == 0">
        <NoData></NoData>
      </div>
    </div>
    <template>
      <Modal
        v-model="showModal"
        :mask-closable="false"
        width="600"
        :closable="false"
        :footer-hide="true"
        :title="title1"
      >
        <Form
          ref="formItem"
          :model="formItem"
          :rules="formItemRule"
          :label-width="85"
        >
          <FormItem label="任务名称" prop="taskName">
            <Input
              v-model.trim="formItem.taskName"
              placeholder="名称长度为1—20个字符"
            ></Input>
          </FormItem>
          <FormItem label="流量包" prop="file">
            <Upload
              ref="uploadIcon"
              :action="upLoadUrl"
              :on-success="imprtQuesSucc"
              :before-upload="handleUploadIcon"
              :model="formItem.file"
              style="display: inline-block"
            >
              <Button
                class="fr"
                type="primary"
                ghost
                icon="ios-cloud-upload-outline"
                >选择文件</Button
              >
            </Upload>
            <WarningTip
              style="position: absolute; left: 104px"
              content="请上传pcap、pcapng类型的文件"
            ></WarningTip>
          </FormItem>
          <FormItem label="描述" prop="description">
            <Input
              v-model.trim="formItem.description"
              type="textarea"
              :maxlength="200"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="描述"
            ></Input>
          </FormItem>
          <FormItem label="忽略包时间戳" prop="">
            <Radio-group
              v-model="formItem.ignorePackageTimestamp"
              @on-change="changeStamp"
            >
              <Radio :label="1">是</Radio>
              <Radio :label="0">否</Radio>
            </Radio-group>
            <WarningTip
              style="position: absolute; left: 104px"
              content="注意事项是xxxx"
            ></WarningTip>
          </FormItem>
          <Divider class="divider_margin" />
          <FormItem style="text-align: right; margin-bottom: 10px">
            <Button @click="cancelUpload()" style="margin-right: 8px">
              取消
            </Button>
            <Button
              type="primary"
              @click="formBtn('formItem')"
              :loading="loading"
            >
              确定
            </Button>
          </FormItem>
        </Form>
      </Modal>
    </template>
  </div>
</template>

<script>
import $ from 'jquery';
import encryption from '@/libs/encryption.js';
import { getFlowData, modifyFlow, createFlow, delFlow } from '@/api/flow.js';
import { debounce } from '@/libs/utils';

import {
    machlakeOfflineTask,
    addOfflineTask,
    activeOfflineTask,
    operateOffline,
} from '@/api/integration3d';
export default {
    components: {  },
    data() {
        const validateUpload = (rule, value, callback) => {
            if (this.formItemRule.file === null) {
                callback(new Error('请选择文件'));
            } else {
                callback();
            }
        };
        return {
            // 用户信息
            USER_ID: '',
            isRootDesigner: '',
            // 页面设置
            fullHeight: document.documentElement.clientHeight,
            fullWidth: document.documentElement.clientWidth,
            setTableHei: 'auto',

            // 数据
            // 查询参数
            queryParams: {
                taskName: '',
                fileName: '',
                status: '',
                flowPage: 1,
                flowPageSize: 10,
            },
            FlowPage: 1,
            FlowPageSize: 10,
            FlowList: [],

            FlowTotal: 0,
            selectFlowType: '',
            creatByMeModal: '',
            searchFlowName: '',
            FlowListLoading: false,

            // 新列表
            showDataList: true,
            showDefImg: false,
            // 查看Flow
            bigFlowModal: false,
            showFlowSrc: '',
            showModal: false,
            isAdd: false,
            upLoadUrl: ``,
            loading: false,
            showSelectBucket: false,
            speed: 0,
            loaded: 0,
            fileSize: 0,
            progress: 0,
            uploadShow: false, //上次时关闭对话框提示
            updataLoading: true,
            isUpdataing: false, //判断是否在上传中
            title1: '创建离线流量分析任务',
            formItem: {
                fileName: '',
                filePath: null,
                file: null,
                fileId: '',
                size:0,
                taskName: '',
                description: '',
                ignorePackageTimestamp: 0,
            },
            formItemRule: {
                taskName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
                file: [{ required: true, validator: validateUpload, trigger: 'change' }],
            },
            FlowCol: [
                {
                    title: '名称',
                    key: 'taskName',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    width: 140,
                    // placement: 'top-left'
                },
                {
                    title: '文件名',
                    key: 'fileName',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    width: 140,
                    // placement: 'top-left'
                },
                {
                    title: '文件大小',
                    key: 'fileSize',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    width: 100,
                    // placement: 'top-left'
                },
                {
                    title: '开始时间',
                    key: 'startTime',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    width: 140,
                    // placement: 'top-left',
                },
                {
                    title: '结束时间',
                    key: 'endTime',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    width: 140,
                    // placement: 'top-left'
                },
                {
                    title: '状态',
                    key: 'state',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    width: 120,
                    // placement: 'top-left'
                    render: (h, params) => {
                        return h('span', this.setStats(params.row.state))
                    }
                },
                {
                    title: '进度',
                    key: 'schedule',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    width: 120,
                    // placement: 'top-left'
                },
                {
                    title: '总流量',
                    key: 'totalFlow',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    width: 120,
                    // placement: 'top-left'
                },
                {
                    title: '峰值带框',
                    key: 'peakBandwidth',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    width: 120,
                    // placement: 'top-left'
                },
                {
                    title: '峰值包速率',
                    key: 'peakPacketRate',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    width: 120,
                    // placement: 'top-left'
                },
                {
                    title: '总包数',
                    key: 'totalPackages',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    width: 120,
                    // placement: 'top-left'
                },
                {
                    title: '创建者',
                    key: 'creatorName',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    width: 120,
                    // placement: 'top-left'
                },
                {
                    title: '创建时间',
                    key: 'created',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    width: 140,
                },
                {
                    title: '描述',
                    key: 'description',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    width: 140,
                },
                {
                    title: '操作',
                    align: 'center',
                    // placement: 'top-right',
                    action: true,
                    width: 240,
                    fixed: 'right',
                    render: (h, params) => {
                        return h(
                            'div',
                            {
                                style: {
                                    // width: '230px'
                                    width: '100%',
                                },
                            },
                            [
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small',
                                        },
                                        style: {
                                            marginRight: '5px',
                                            // display: params.row.type === 1 ? 'inline-block' : 'none'
                                        },
                                        on: {
                                            click: () => {
                                                this.getFileList(params.row, 0);
                                            },
                                        },
                                    },
                                    '查看流量'
                                ),
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small',
                                            disabled: params.row.state == 'create'
                                        },
                                        style: {
                                            marginRight: '5px',
                                            // display: params.row.type === 1 ? 'inline-block' : 'none'
                                        },
                                        on: {
                                            click: () => {
                                                this.operateOffline(params.row.id, 'stop');
                                            },
                                        },
                                    },
                                    '停止'
                                ),
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small',
                                            disabled: params.row.state == 'start'
                                        },
                                        style: {
                                            marginRight: '5px',
                                            // display: params.row.type === 1 ? 'inline-block' : 'none'
                                        },
                                        on: {
                                            click: () => {
                                                this.operateOffline(params.row.id, 'start');
                                            },
                                        },
                                    },
                                    '开始'
                                ),
                                h(
                                    'Poptip',
                                    {
                                        props: {
                                            confirm: true,
                                            'ok-text': '确定',
                                            'cancel-text': '取消',
                                            type: 'error',
                                            size: 'large',
                                            title: '你确定要删除吗?',
                                            transfer: true,
                                        },
                                        on: {
                                            'on-ok': () => {
                                                console.log('=====删除');
                                                this.operateOffline(params.row.id,'delete');
                                            },
                                        },
                                    },
                                    [
                                        h(
                                            'Button',
                                            {
                                                props: {
                                                    type: 'error',
                                                    size: 'small',
                                                    // disabled: this.disabledAllBtn,
                                                    ghost: true,
                                                },
                                                style: {
                                                    // marginRight: '5px',
                                                    // border: 'none',
                                                    // background: 'none',
                                                    // boxShadow: 'none'
                                                },
                                            },
                                            '删除'
                                        ),
                                    ]
                                ),
                            ]
                        );
                    },
                },
            ],
        };
    },
    created() {
        // 获取用户id
        let November = sessionStorage.getItem('November');
        November = JSON.parse(encryption.SelfUseDecrypt(November));
        this.USER_ID = November.userId;
        this.isRootDesigner = November.isRootDesigner;
        this.upLoadUrl = `/api/minio/upload/permanent?visibility=company&type=pcap&bucket=pcap`;
    },
    mounted() {
        this.setStyle();
        window.onresize = () => {
            this.setStyle();
        };
        //赋值查询条件
        // let queryObj = sessionStorage.getItem('queryObj');
        // if (queryObj) {
        //   let params = JSON.parse(queryObj);
        //   this.FlowPage = params.pageIndex;
        //   this.FlowPageSize = params.pageSize;
        //   this.selectFlowType = params.visibility;
        //   this.searchFlowName = params.name;
        //   this.creatByMeModal = params.self;
        //   sessionStorage.removeItem("queryObj");
        // }
        // this.getFlowList()
        this.machlakeOfflineTask();
    },
    methods: {
        returnHwDrillDetail() {
            this.$router.push({
                name: 'hwDrillDetail',
                query: {
                    name: this.$route.query.name,
                    prjid: this.$route.query.prjid,
                    id: this.$route.query.id,
                    page: this.$route.query.page,
                },
            });
        },
        getFileList(row) {
            console.log(row);
            this.$router.push({
                path: '/fileAnalysis',
                query: {
                    name: this.$route.query.name,
                    prjid: this.$route.query.prjid,
                    id: this.$route.query.id,
                    page: this.$route.query.page,
                },
            });
        },

        // 设置高度
        setStyle() {
            window.fullHeight = document.documentElement.clientHeight;
            window.fullWidth = document.documentElement.clientWidth;
            this.fullHeight = window.fullHeight;
            this.fullWidth = window.fullWidth;
            this.setTableHei = this.fullHeight - 197;
            this.FlowPageSize = Math.floor(this.setTableHei / 96);
        },

        // 刷新Flow
        refreshFlow() {
            this.queryParams.fileName = '';
            this.queryParams.taskName = '';
            this.queryParams.status = '';
            this.queryParams.flowPage = 1;
            this.queryParams.flowPageSize = 10;

            // this.creatByMeModal = false
            this.machlakeOfflineTask();
        },

        machlakeOfflineTask() {
            let params = {
                taskName: this.queryParams.taskName,
                fileName: this.queryParams.fileName,
                state: this.queryParams.status,
                pageIndex: this.queryParams.flowPage,
                pageSize: this.queryParams.flowPageSize,
            };
            let project = this.$route.query.prjid;
            machlakeOfflineTask(project, params)
                .then((res) => {
                    if (res.code == 1) {
                        console.log('===', res.data);
                        this.FlowList = res.data.items;
                        this.FlowTotal = res.data.total;
                    } else {
                    }
                })
                .catch((error) => {
                    this.$Message.error(error);
                });
        },

        changeStamp(val) {
            console.log('🚀  changeStamp ~ val:', val);
        },

        formBtn(name) {
            console.log('============', this[name]);
            this.$refs[name].validate((valid) => {
                if (valid) {
                    if (!this.formItem.filePath) {
                        this.$Message.warning({
                            content: '请选择上传的文件！',
                            duration: 2,
                        });
                        return;
                    }
                    let params = {
                        fileName: this.formItem.fileName,
                        taskName: this.formItem.taskName,
                        // filePath: this.formItem.filePath,
                        fileId: this.formItem.fileId,
                        description: this.formItem.description,
                        // size: this.formItem.size,
                        projectId: this.$route.query.prjid,
                        // projectId: 'J6c710a699fd4d83a7418c468bf5b562',
                        ignorePackageTimestamp:this.formItem.ignorePackageTimestamp == 0 ? false : true,
                    };
                    this.loading = true;
                    addOfflineTask(params).then((res) => {
                        if (res.code === 1) {
                            this.showModal = false;
                            this.$Message.success({
                                content: '操作成功',
                                duration: 3,
                            });
                            this.loading = false;
                            this.$refs['uploadIcon'].clearFiles();
                            this.formItem.file = null;
                            this.formItem.filePath = null;
                            this.formItem.fileId = '';
                            this.$refs['formItem'].resetFields();
                            this.queryParams.flowPage = 1;
                            this.machlakeOfflineTask();
                            this.showModal = false;
                        } else {
                            this.loading = false;
                            this.$Message.error({
                                content: res.message,
                                duration: 2,
                            });
                        }
                    });
                } else {
                    this.$Message.error('请完善信息！');
                }
            });
        },

        // 上传相关
        cancelUpload() {
            //this.$refs['uploadIcon'].clearFiles()
            this.formItem.filePath = null;
            this.formItem.file = null;
            this.$refs['formItem'].resetFields();
            this.showModal = false;
        },
        getFileName(name) {
            return name.substring(0, name.lastIndexOf('.'));
        },
        handleUploadIcon(file) {
            this.speed = 0;
            this.loaded = 0;
            this.progress = 0;
            this.isUpdataing = true;
            this.onlyFileName = file.name + '_' + new Date().getTime();
            let fileType = ['pcap', 'PCAP', 'pcapng', 'PCAPNG'];
            if (file && file.name.endsWith('.pcap' || 'PCAP')) {
                this.upLoadUrl =
                    '/api/minio/upload/permanent?visibility=company&type=pcap&bucket=pcap';
            } else {
                this.upLoadUrl =
                    '/api/minio/upload/permanent?visibility=company&type=pcapng&bucket=pcapng';
            }
            console.log('==== this.upLoadUrl', this.upLoadUrl);
            if (file) {
                if (file.size > 1024 * 1024) {
                    this.fileSize =
                        (Math.round((file.size * 100) / (1024 * 1024)) / 100).toString() + 'MB';
                } else {
                    this.fileSize = (Math.round((file.size * 100) / 1024) / 100).toString() + 'KB';
                }
                //验证名称
                if (file.name) {
                    let name = this.getFileName(file.name);
                    // let reg = new RegExp('^[\u4E00-\u9FA5a-zA-Z0-9_ -]*$');
                    let reg = new RegExp('/[\\/:*?"<>|]/gi');
                    if (reg.test(name) || name.length > 64) {
                        this.$Message.error({
                            content:'文件名称不能包含下列任意英文字符 \ / : * ? " < > |，名称长度为1-64个字符',
                            duration: 3,
                        });
                        return false;
                    }
                }
                let FileExt = file.name.replace(/.+\./, ''); //取得文件的后缀名
                if (!fileType.includes(FileExt)) {
                    // 添加上传的文件类型验证
                    this.progressflag = false; //关闭文件上传进度展示
                    this.$Message.error({
                        content: '请上传pcap、pcapng类型的文件',
                        duration: 5,
                        closable: true,
                    });
                    return false;
                }
                this.$refs['uploadIcon'].clearFiles();
            }
        },
        imprtQuesSucc(res) {
            console.log('🚀 ~ file: index.vue:723 ~ imprtQuesSucc ~ res:', res)
            if (res.code === 1) {
                this.formItem.filePath = res.data;
                this.formItem.fileId = res.info.id;
                this.formItem.size = res.info.size;
                this.formItem.fileName = res.info.originalName.split('.')[0];
            } else {
                this.$Message.error({ content: res.message, duration: 3 });
                this.$refs['uploadIcon'].clearFiles();
            }
        },

        // 操作离线任务 重新开始 开始\停止 删除
        operateOffline(id, operate) {
            console.log('🚀 ~ file: index.vue:735 ~ operateOffline ~ id:', id)
            activeOfflineTask(id, operate).then((res) => {
                    if (res.code == 1) {
                        this.$Message.success(res.message);
                        this.machlakeOfflineTask();
                    } else {
                        this.$Message.warning(res.message);
                    }
                })
                .catch((error) => {
                    this.$Message.error(error);
                });
        },

        // Flow列表
        getFlowList: debounce(function () {
            let params = {
                pageIndex: this.FlowPage,
                pageSize: this.FlowPageSize,
                visibility: this.selectFlowType,
                fileName: this.searchFlowName,
                type: 'l7',
            };
            this.queryObj = JSON.stringify(params);
            getFlowData(params)
                .then((res) => {
                    if (res.data.code == 1) {
                        let pageList = res.data.data;
                        this.FlowTotal = parseInt(pageList.total);
                        this.FlowList = pageList.items;
                    } else {
                        this.FlowList = [];
                        this.FlowTotal = 0;
                    }
                    this.FlowListLoading = false;
                })
                .catch((err) => {
                    console.log(err);
                });
        }, 500),
        FlowOnChange(val) {
            this.FlowPage = val;
            this.getFlowList();
        },
        selectFlowTypeChange(val) {
            this.FlowPage = 1;
            this.selectFlowType = val;
            this.getFlowList();
        },
        searchCreatedByMe(val) {
            this.FlowPage = 1;
            this.getFlowList();
        },
        searchFlowNameBtn() {
            this.FlowPage = 1;
            this.searchFlowName = $.trim(this.taskName);
            this.getFlowList();
        },
        // 添加Flow
        addFlowModal() {
            this.showModal = true;
            this.loading = false;
            // this.formItem.visibility = 'share'
            this.formItem.file = null;
            this.formItem.fileId = '';
            // this.showSelectBucket = false
            this.isAdd = true;
            this.title1 = '创建离线流量任务';
            this.$nextTick(() => {
                this.$refs['uploadIcon'].clearFiles();
                this.$refs['formItem'].resetFields();
            });
        },
        // 修改Flow
        modifyFlow1(row) {
            this.showModal = true;
            this.loading = false;
            this.title1 = '修改流量';
            this.isAdd = false;
            let params = Object.assign({}, row);
            this.formItem.fileName = params.fileName;
            this.formItem.id = params.id;
            this.formItem.description = params.description;
        },
        // 删除
        delFlow(id) {
            delFlow(id)
                .then((res) => {
                    if (res.data.code == 1) {
                        this.$Message.success({
                            content: '删除成功！',
                            duration: 3,
                        });
                        this.FlowPage =
                            this.FlowPage > 1 && this.FlowList.length === 1
                                ? this.FlowPage - 1
                                : this.FlowPage;
                        this.getFlowList();
                    } else {
                        this.$Message.error(res.message);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        // 设置可见范围
        setVisibility(val) {
            let obj = {};
            let text = '';
            let color = '';
            if (val === 'share') {
                text = '单位';
                color = '#32CD32';
            } else if (val === 'private') {
                text = '个人';
                color = '#FFA500';
            } else if (val === 'public') {
                text = '系统';
                color = '#4169E1';
            }
            obj.text = text;
            obj.color = color;
            return obj;
        },
        // 设置可见范围
        setStats (val) {
            let text = '';
            if (val === 'create') {
                text = '新建';
            } else if (val === 'wait_run') {
                text = '等待分析';
            } else if (val === 'run') {
                text = '分析中';
            } else if (val === 'disable') {
                text = '分析停止';
            } else if (val === 'done') {
                text = '分析完成';
            } else if (val === 'error') {
                text = '分析异常';
            } else {
                text = '未知类型';
            }
            return text;
        },

        formBtn12(name) {
            let _this = this;
            let isPublic = '';
            if (this.isAdd) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if (!this.formItem.filePath) {
                            _this.$Message.warning({
                                content: '请选择上传的文件！',
                                duration: 2,
                            });
                            return;
                        }
                        let params = {
                            fileName: _this.formItem.fileName,
                            filePath: _this.formItem.filePath,
                            fileId: _this.formItem.fileId,
                            description: _this.formItem.description,
                        };
                        this.loading = true;
                        createFlow([params]).then((res) => {
                            if (res.data.code === 1) {
                                this.showModal = false;
                                _this.$Message.success({
                                    content: '操作成功',
                                    duration: 3,
                                });
                                this.loading = false;
                                this.$refs['uploadIcon'].clearFiles();
                                this.showModal = false;
                                _this.formItem.file = null;
                                _this.formItem.filePath = null;
                                this.formItem.fileId = '';
                                this.FlowPage = 1;
                                this.getFlowList();
                            } else {
                                this.loading = false;
                                _this.$Message.error({
                                    content: res.data.message,
                                    duration: 2,
                                });
                            }
                        });
                    } else {
                        _this.$Message.error('请完善信息！');
                    }
                });
            } else {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let params = {
                            fileName: _this.formItem.fileName,
                            description: _this.formItem.description,
                        };
                        this.loading = true;
                        modifyFlow(params, _this.formItem.id).then((res) => {
                            if (res.data.code === 1) {
                                this.showModal = false;
                                _this.$Message.success({
                                    content: '操作成功',
                                    duration: 3,
                                });
                                this.loading = false;
                                this.showModal = false;
                                _this.formItem.file = null;
                                _this.formItem.filePath = null;
                                this.getFlowList();
                            } else {
                                this.loading = false;
                                _this.$Message.error({
                                    content: res.data.message,
                                    duration: 2,
                                });
                            }
                        });
                    } else {
                        _this.$Message.error('请完善信息！');
                    }
                });
            }
        },
    },
};
</script>
<style scoped>
.fixedHeightTable {
  margin: 20px 20px 0 20px;
}

::-webkit-scrollbar {
  width: 5px; /*滚动条宽度*/
  height: 5px; /*滚动条高度*/
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 2.5px; /*滚动条的背景区域的圆角*/
  background-color: #e6e6e6; /*滚动条的背景颜色*/
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 2.5px; /*滚动条的圆角*/
  background-color: #aaa; /*滚动条的背景颜色*/
}
.page-wrap .fixedHeightTable .ivu-table-body {
  max-height: calc(100vh - 345px);
  overflow: hidden auto;
  overscroll-behavior: contain;
}
.divider_margin {
  margin: 8px 0px;
}

.too {
  position: absolute;
  left: 113px;
  top: -1px;
}
.ios-alert {
  color: orange;
  font-size: 16px;
  cursor: pointer;
}
.page-wrap {
  padding: 30px;
  height: 100%;
}
.page-content {
  background-color: #fff;
  border-radius: 10px;
  height: 100%;
}
.img-header {
  display: flex;
  justify-content: space-between;
  padding: 20px 20px 0 20px;
}
/* 新样式 */
.content-wrap {
  max-height: calc(100vh - 197px);
  width: 100%;
  font-size: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 20px;
  padding: 0 20px;
}
.content-wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.content-wrap::-webkit-scrollbar-thumb {
  /*滚动条里面小方块样式*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(209, 209, 209, 0.6);
}
.content-wrap::-webkit-scrollbar-track {
  /*滚动条里面轨道样式*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: rgba(179, 179, 179, 0.1);
}
.project-item {
  width: 100%;
  border-radius: 4px;
  border: 2px solid rgb(231, 231, 241);
  padding: 10px 15px;
  margin-bottom: 15px;
}
.item-first-line {
  display: flex;
  justify-content: space-between;
}
.project-name-state {
  display: flex;
  justify-content: flex-start;
  /* cursor: pointer; */
}
.project-name {
  display: flex;
  font-size: 16px;
  font-weight: 600;
}
.project-name .Flow-name {
  max-width: 400px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.project-status-text {
  font-weight: 600;
  font-size: 14px;
  margin-left: 10px;
  display: flex;
  justify-content: flex-start;
}
.btn-Flow-wrap {
  display: flex;
  justify-content: flex-end;
}
.click-Flow {
  cursor: pointer;
  height: 22px;
  margin-left: 20px;
}
.project-other-info {
  display: flex;
  justify-content: flex-start;
  flex-wrap:wrap;
  margin-top: 8px;
  color: rgba(51, 51, 51, 0.4);
  font-weight: bold;
}
.sendMsgContent {
  display: flex;
  justify-content: flex-start;
  margin-left: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  width: calc(100vh - 300px);
}
.thumbnails {
  display: inline-block;
  max-height: 30px;
  width: auto;
  margin-left: 20px;
  vertical-align: middle;
  cursor: zoom-in;
}
.modal-img-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: auto;
}
</style>
